<template>
<view class="com-wrap">
  <u-search bg-color="rgba(255,255,255,0.4)" :input-style="{backgroundColor:'transparent'}" border-color="transparent"
            @search="init"></u-search>
  <view class="list">
    <view v-if="list.length === 0" style="padding-top: 100px;">
      <u-empty mode="list"></u-empty>
    </view>
    <view class="list-item" v-for="item in list" :key="item.id">
      <tki-qrcode
          class="code"
          :ref="'qrcode_' + item.id"
          uni="px"
          :val="item.url"
          :size="60 * 2"
      />
      <view class="flex1">
        <view class="row row1 u-row-between">
          <text  @click="toDetail(item)">{{ item.name }}</text>
          <u-switch size="45" active-color="#165DFF" :value="item.is_disable == 0"
                    @change="(e)=>onChangeCodeStatus(e,item)"></u-switch>
        </view>
        <view class="row row2"  @click="toDetail(item)">有效期至：{{ item.create_time }}</view>
        <view class="row row3 u-row-between"  @click="toDetail(item)">
          <view>
            已扫码次数：{{ item.scan_count }}
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>


<script>
import {apiChangeCodeStatus, apiGetQrcodeList} from "../../../api/dynamic_code.js";
import TkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";

export default {
  name: "qrcode_list",
  components: { TkiQrcode},
  data() {
    return {
      list: []
    };
  },
  created() {
    this.init('');
    uni.$on('REFRESH_QRCODE_LIST',()=>this.init(''));
  },
  destroyed(){
    uni.$off('REFRESH_QRCODE_LIST')
  },
  methods: {
    async init(name) {
      try {
        const res = await apiGetQrcodeList({page_no: 1, page_size: 1000, name});
        this.list = res.data.list;
        this.$nextTick(() => {
          for (const item of this.list) {
            this.$refs['qrcode_' + item.id][0]._makeCode();
          }
        })
      } finally {

      }
    },
   async onChangeCodeStatus(e,item){
      await apiChangeCodeStatus({id: item.id, is_disable: Number(e)});
      item.is_disable = Number(e);
    },
  toDetail(item){
    uni.navigateTo({
      url:'/yixu/pages/dynamic_code/qrcode_detail?id=' + item.id
    })
  },
  },

}
</script>


<style scoped lang="scss">

.com-wrap {
  //padding: 40rpx 30rpx;
  padding: 30rpx;
}

::v-deep .u-search {
  background: transparent !important;
  padding: 0 !important;

  .u-content {
    padding: 0 30rpx;
  }
}

.tab-wrap {
  display: flex;
  justify-content: space-around;
  color: #1D2129;
  gap: 20rpx;

  .tab {
    border-radius: 40px;
    padding: 12rpx;
    flex: 1;
    text-align: center;
    background: #F7F8FA;
    font-size: 30rpx;
  }

  .tab-active {
    color: white;
    background: #165DFF;
  }
}

.list-item {
  background: white;
  padding: 30rpx 20rpx;
  margin-top: 30rpx;
  border-radius: 10rpx;
  color: #3A3F4F;
  display: flex;

  .row1 {
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(17, 20, 31, 1);
  }

  view {
    margin-bottom: 4rpx;
  }

  .code {
    width: 140rpx;
    height: 140rpx;
  }
}

</style>
